<template>
  <div>
    <p class="info">利息/贷款限额费分摊</p>
    <interestExport :columns="columns" class="mb-4" />

    <div class="flex justify-end mb-4 clear-both">
      <p>利息总额：{{ moneyType(interests) }}</p>
      <p class="ml-4">贷款限额费总额：{{ moneyType(limitFees) }}</p>
    </div>
    <a-table rowKey="month" :columns="columns" :data-source="data">
      <span slot="interests" slot-scope="interests"> {{ moneyType(interests) }}</span>
      <span slot="limitFees" slot-scope="limitFees"> {{ moneyType(limitFees) }}</span>
      <a-table
        rowKey="day"
        slot="expandedRowRender"
        slot-scope="record"
        :columns="innerColumns"
        :data-source="record.innerData"
      >
        <span slot="interests" slot-scope="interests"> {{ moneyType(interests) }}</span>
        <span slot="limitFees" slot-scope="limitFees"> {{ moneyType(limitFees) }}</span>
      </a-table>
    </a-table>
  </div>
</template>
<script>
import { getInterest } from '@/api/common'
export default {
  name: 'interest',
  data() {
    return {
      interests: 0,
      limitFees: 0,
      currency: '',
      columns: [
        { title: '月份', dataIndex: 'month', key: 'month' },
        { title: '货币', dataIndex: 'currency', key: 'currency', scopedSlots: { customRender: 'currency' } },
        { title: '利息', dataIndex: 'interests', key: 'interests', scopedSlots: { customRender: 'interests' } },
        { title: '贷款限额费', dataIndex: 'limitFees', key: 'limitFees', scopedSlots: { customRender: 'limitFees' } }
      ],
      data: [],
      innerColumns: [
        { title: '日期', dataIndex: 'day', key: 'day' },
        { title: '利息', dataIndex: 'interests', key: 'interests', scopedSlots: { customRender: 'interests' } },
        { title: '贷款限额费', dataIndex: 'limitFees', key: 'limitFees', scopedSlots: { customRender: 'limitFees' } }
      ]
      // innerData: []
    }
  },
  components: {
    interestExport: () => import('../com/interestExport.vue')
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      this.totalRate = 0
      const _form = {
        projectId: this.$route.query.id
      }
      const res = await getInterest(_form)
      const data = res.result.data
      this.currency = data.currency
      const colmuns = []
      this.limitFees = 0
      this.interests = 0
      for (let key in data.dict) {
        let interests = 0
        let limitFees = 0
        const crrt = data.dict[key]
        const innerData = []
        for (let day in crrt) {
          innerData.push({
            day: day,
            interests: crrt[day].interests,
            limitFees: crrt[day].limitFees
          })
          interests += crrt[day].interests
          limitFees += crrt[day].limitFees
        }
        colmuns.push({
          month: key,
          currency: data.currency,
          interests: interests,
          limitFees: limitFees,
          innerData
        })
        this.interests += interests
        this.limitFees += limitFees
        this.data = colmuns
      }
    },
    moneyType(v) {
      v = v.toFixed(2)
      // console.log(v)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  }
}
</script>
<style lang="css" scoped>
.info {
  border-left: 2px solid #1890ff;
  padding-left: 10px;
  font-size: 25px;
  /* margin-left: 50px; */
  margin: 20px 0;
  margin-left: 50px;
}
</style>
